<template>
  <div class="order">
    <Back title="我的订单" :sticky="true" />
    <div>
      <Bg>
        <van-tabs
          v-model="activeIndex"
          animated
          color="#0C34BA"
          swipeable
          line-height="2px"
          @change="changeOrderStatus"
        >
          <van-tab
            :title="item.title"
            v-for="(item, index) in tabsData"
            :key="index"
          >
            <div class="tab-content">
              <div class="order-info" v-for="(v1, i1) in orderData" :key="i1">
                <div class="order-title">
                  <div class="num">{{ v1.oid }}</div>

                  <div class="finished-delete" v-if="v1.status === 2">
                    <div class="finished">已完成</div>
                    <div class="delete" @click="deleteOrder(v1.oid)">
                      <van-icon name="delete-o" />
                    </div>
                  </div>

                  <div class="finished-delete" v-else>
                    <div class="receive" @click="confirmReceive(v1, i1)">
                      确认收货
                    </div>
                  </div>
                </div>
                <div class="order-product">
                  <div
                    class="order-item"
                    v-for="(v2, i2) in v1.showProducts"
                    :key="i2"
                  >
                    <OrderProItem :product="v2" />
                  </div>

                  <div class="show-more" v-if="v1.showMore">
                    <span @click="showMoreProducts(v1)"
                      >显示更多商品<van-icon name="arrow-down"
                    /></span>
                  </div>
                </div>
                <div class="order-bottom">
                  <div class="order-date">{{ v1.date | formatDate }}</div>
                  <div class="order-bottom-info">
                    <div class="count">共计 {{ v1.count }} 件商品</div>
                    <div class="total">
                      总金额&nbsp;&nbsp;&yen;{{ v1.total }}
                    </div>
                  </div>
                  <i class="circle circle-left"></i>
                  <i class="circle circle-right"></i>
                </div>
              </div>
              <van-empty
                v-show="orderData.length === 0"
                description="没有订单数据！"
              />
            </div>
          </van-tab>
        </van-tabs>
      </Bg>
    </div>
  </div>
</template>

<script>
import Back from "../components/Back.vue";
import Bg from "../components/Bg.vue";
import OrderProItem from "../components/OrderProItem.vue";
export default {
  name: "Order",
  components: {
    Back,
    Bg,
    OrderProItem,
  },
  data() {
    return {
      activeIndex: 0,

      tabsData: [
        {
          title: "全部",
        },
        {
          title: "进行中",
        },
        {
          title: "已完成",
        },
      ],

      //订单数据
      orderData: [],

      //订单商品数据最多显示3个商品
      showCount: 3,
    };
  },

  created() {
    this.getOrderData();
  },

  methods: {
    //获取我的订单数据
    getOrderData() {
      this.axios({
        method: "get",
        url: "/findOrder",
        params: {
          status: this.activeIndex,
        },
      })
        .then((res) => {
          if (res.data.code === 700) {
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 70000) {
            //获取所有订单编号
            let orderNos = [];
            res.data.result.forEach((v) => {
              v.small_img = v.smallImg;

              if (orderNos.indexOf(v.oid) === -1) {
                orderNos.push(v.oid);
              }
            });

           

            let orderData = [];
            orderNos.forEach((v) => {
              let order = {
                oid: v,
                count: 0,
                total: 0,
                //订单所有商品数据
                products: [],
                //初始显示订单商品数据
                showProducts: [],
              };
              res.data.result.forEach((item) => {
                if (v === item.oid) {
                  if (order.products.length === 0) {
                    order.status = item.status;
                    order.date = item.createdAt;
                  }

                  order.count += item.count;
                  order.total = item.count * item.price;

                  order.products.push(item);
                }
              });
              orderData.push(order);
            });

            //处理控制显示更多按钮属性
            orderData.forEach((v) => {
              v.showMore = v.products.length > 3;
              v.showProducts.push(...v.products.slice(0, this.showCount));
            });

            //按照订单日期排序
            orderData.sort((a, b) => {
              return new Date(b.date).getTime() - new Date(a.date).getTime();
            });

            this.orderData = orderData;
          }
        })
        .catch((err) => {});
    },

    //切换订单状态
    changeOrderStatus() {
      this.getOrderData();
    },

    //确认收货
    confirmReceive(v1, index) {
      this.axios({
        method: "post",
        url: "/receive",
        data: {
          oid: v1.oid,
        },
      })
        .then((res) => {
          if (res.data.code === 700) {
            return this.$router.push({ name: "Login" });
          }

          this.$toast(res.data.msg);
          if (res.data.code === 80000) {
            if (this.activeIndex === 1) {
              //如果当前时进行中的订单数据, 则移除当前页面的数据
              this.orderData.splice(index, 1);
            } else if (this.activeIndex === 0) {
              v1.status = 2;
            }
          }
        })
        .catch((err) => {});
    },

    //显示更多商品
    showMoreProducts(item) {
      //       item.showProducts.push(...item.products.slice(this.showCount));
      item.showMore = false;
    },

    //删除订单
    deleteOrder(oid, index) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认删除该订单？",
        })
        .then(() => {
          this.axios({
            method: "post",
            url: "/removeOrder",
            data: {
              oid,
            },
          })
            .then((res) => {
              if (res.data.code === 700) {
                return this.$router.push({ name: "Login" });
              }

              this.$toast(res.data.msg);

              if (res.data.code === 90000) {
                this.orderData.splice(index, 1);
              }
            })
            .catch((err) => {});
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.order-date {
  margin-bottom: 10px;
  font-size: 12px;
  color: #999;
}
.receive {
  color: #666;
}
.order-bottom-info {
  display: flex;
  align-items: center;
}
.num {
  margin-right: auto;
  font-size: 14px;
  color: #444;
}

.finished-delete {
  display: flex;
  align-items: center;
}

.finished {
  color: #666;
  font-size: 14px;
  margin-right: 10px;
}

.delete {
  width: 22px;
  height: 22px;
  font-size: 22px;
  color: #999;
}
.show-more {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-top: 10px;
}
.order-item {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.order-product {
  padding-bottom: 20px;
}
/deep/ .shopbag-item {
  padding: 0;
}
.circle {
  position: absolute;

  top: -10px;
  width: 20px;
  height: 20px;
  background-color: #f5f5f5;
  border-radius: 50%;
}

.circle-left {
  left: -20px;
}

.circle-right {
  right: -20px;
}
.count {
  margin-right: auto;
}
.total {
  font-weight: bold;
  color: #ee0a24;
}
.order-bottom {
  font-size: 14px;
  padding: 20px 0 10px;
  position: relative;
  border-top: 1px dashed #e8e8e8;
}
.order-title {
  color: #444;
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.order-info {
  padding: 10px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-top: 10px;
}
.tab-content {
  margin-top: 10px;
}

/deep/ .bg-content {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

/deep/ .van-tabs__wrap {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
</style>